<template>
  <footer v-show="this.$route.path!=`/goods`&&this.$route.path!=`/search`&&this.$route.path!=`/login`&&this.$route.path!=`/details`&&this.$route.path!=`/reg`&&this.$route.path!=`/address`&&this.$route.path!=`/order`">
    <van-tabbar v-model="active"
                active-color="#F21C1C">
      <van-tabbar-item icon="wap-home-o"
                       to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o"
                       to="/list">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o"
                       :info="this.$store.state.cart"
                       to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o"
                       to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </footer>
</template>

<script>
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  data () {
    return {
      active: 0
    };
  },
  created () {
    let arr = ["/home", "/list", "/cart", "/mine"];
    if (arr.indexOf(this.$route.path) != -1) {
      this.active = arr.indexOf(this.$route.path);
    } else {
      this.active = 0;
    }

  },
  mounted () {
    if (localStorage.checked) {
      let id;
      if (localStorage.checked == "true") {
        id = localStorage.id;

      } else if (localStorage.checked == "false") {
        id = sessionStorage.id;
      }
      if (id != undefined) {
        $.ajax({
          type: "post",
          url: "/goods/cart",
          data: { type: "get", id: id * 1 },
          dataType: "json",
          success: response => {
            if (response.data.length == 0) {
              this.$store.state.cart = 0;
            } else {
              let num = 0;
              response.data.forEach(item => {
                num += item.num * 1;
              });
              this.$store.state.cart = num;
            }
          }
        });
      } else {
        this.$store.state.cart = 0;
      }
    } else {
      this.$store.state.cart = 0;
    }
  },
  watch: {
    $route (val) {
      let arr = ["/home", "/list", "/cart", "/mine"];
      if (arr.indexOf(val.path) != -1) {
        this.active = arr.indexOf(val.path);
      } else {
        this.active = 0;
      }

    }
  }
};
</script>
<style scoped>
footer {
  width: 100vw;
  height: 1.1rem;
}
.van-tabbar {
  height: 1.1rem;
}
</style>